<template>
	<view class="bigBox">
		<view class="content"
			><view class="title">个人挂号记录详情</view>
			<view class="detailed" v-for="(item, index) in dataList" :key="index">
				<view class="detailed_content">
					<view class="detailed_content_title">医生姓名：</view>
					<view class="content_item">{{ item.doctorName }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">挂号科室：</view>
					<view class="content_item">{{ item.deptName }}</view>
				</view>
				<!-- <view class="detailed_content">
					<view class="detailed_content_title">挂号卡号：</view>
					<view class="content_item">{{ item.visitCardNo }}</view>
				</view> -->
				<view class="detailed_content">
					<view class="detailed_content_title">就诊费用：</view>
					<view class="content_item">{{ item.registerFee }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">挂号时间：</view>
					<view class="content_item"
						>{{ item.registerDate.split(' ')[0] }}
						<text style="margin-left: 10rpx">{{
							item.serviceStartTime
						}}</text></view
					>
					<!-- <view class="content_item">{{ rTime(item.registerDate) }}</view> -->
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">挂号班次：</view>
					<view class="content_item">{{
						item.shift == 0 ? '上午' : '下午'
					}}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">订单号：</view>
					<view class="content_item">{{ item.tradeOrderNo }}</view>
				</view>
				<!-- <view class="detailed_content">
					<view class="detailed_content_title">挂号来源：</view>
					<view class="content_item">{{ item.registerSource }}</view>
				</view> -->
				<!-- <view class="detailed_content">
					<view class="detailed_content_title">就诊日期：</view>
					<view class="content_item">{{ item.visitDate }}</view>
				</view> -->
				<view class="detailed_content">
					<view class="detailed_content_title">挂号流水号：</view>
					<view class="content_item">{{ item.serialNo }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">支付状态：</view>
					<view
						class="content_item"
						:style="{
							color:
								item.chargeFlag == 0
									? nonPayment
									: item.chargeFlag == 1
									? havePiad
									: item.chargeFlag == 2
									? refund
									: ARefundOf,
						}"
						>{{
							item.chargeFlag == 0
								? '未支付'
								: item.chargeFlag == 1
								? '已支付'
								: item.chargeFlag == 2
								? '已退款'
								: '退款中'
						}}</view
					>
				</view>
				<u-button
					v-if="item.chargeFlag == '1'"
					type="error"
					:plain="true"
					@click="cancel"
					>取消预约</u-button
				>
			</view>
			<view class="safe"></view
		></view>
		<u-modal
			v-model="showModal"
			:show-cancel-button="true"
			@confirm="confirm"
			@cancel="cancelBtn"
		>
			<view style="padding: 20rpx">
				<view style="text-align: center; color: red; margin-bottom: 10px">{{
					content
				}}</view>
				<u-form
					:model="model"
					:rules="rules"
					ref="uForm"
					:errorType="errorType"
				>
					<u-form-item label=" " prop="typeMenu">
						<u-input
							:border="border"
							placeholder="请选择取消原因"
							v-model="model.typeMenu"
							type="select"
							@click="typeMenuShow = true"
						></u-input> </u-form-item></u-form
			></view>
		</u-modal>
		<u-modal
			v-model="showContent"
			:content="contentS"
			:show-cancel-button="false"
			:show-title="false"
			:content-style="{ color: 'red', fontSize: '38rpx' }"
		></u-modal>
		<u-select
			mode="single-column"
			:list="typeMenuList"
			label-name="display"
			value-name="value"
			v-model="typeMenuShow"
			@confirm="typeMenuConfirm"
		></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { cancelFeedback, cancelRegister } from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			model: { typeMenu: '', cancelId: '' },

			typeMenuList: [
				// {
				// 	value: '电子产品',
				// 	label: '电子产品',
				// },
				// {
				// 	value: '服装',
				// 	label: '服装',
				// },
				// {
				// 	value: '工艺品',
				// 	label: '工艺品',
				// },
			],
			typeMenuShow: false,
			showModal: false,
			showContent: false,
			nonPayment: 'orange',
			refund: 'red',
			havePiad: 'green',
			ARefundOf: '#0089ffe0',
			dataList: [],
			content: '',
			contentS: '时间已过，不能够取消',
			rules: {
				typeMenu: [
					{
						required: true,
						message: '请选择取消原因',
						trigger: 'change',
					},
				],
			},
			errorType: ['message'],
			timeSlot: '',
			registerDate: '',
			parameterList: {
				id: '',
				serialNo: '',
				orgCode: '',
				registerFee: '',
				orgId: this.orgId,
				orgName: this.curHos,
				cancelType: '',
				cancelReason: '',
				idCardNo: this.patientIdentity,
				tradeOrderId: '',
				tradeOrderNo: '',
				serviceStartTime: '',
				serviceEndTime: '',
			},
		}
	},
	onLoad(option) {
		this.parameterList.serialNo = JSON.parse(option.parameter).serialNo
		this.parameterList.registerFee = JSON.parse(option.parameter).registerFee
		this.parameterList.id = JSON.parse(option.parameter).id
		this.parameterList.tradeOrderId = JSON.parse(option.parameter).tradeOrderId
		this.parameterList.tradeOrderNo = JSON.parse(option.parameter).tradeOrderNo
		this.parameterList.serviceStartTime = JSON.parse(
			option.parameter,
		).serviceStartTime
		this.parameterList.serviceEndTime = JSON.parse(
			option.parameter,
		).serviceEndTime
		this.dataList.push(JSON.parse(option.parameter))
		this.registerDate = this.dataList[0].registerDate
		console.log(this.dataList[0].registerDate, '测试测试')
		this.timeSlot = this.dataList[0].timeSlot
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	watch: {
		showModal() {
			this.$nextTick(() => {
				this.$refs.uForm.resetFields(this.rules)
			})
			this.model.typeMenu = ''
		},
	},
	computed: {
		...mapState({
			// 身份证号
			patientIdentity: state => state.patientIdentity,
			curHos: state => state.curHos,
			orgCode: state => state.orgCode,
			orgId: state => state.orgId,
		}),
	},
	methods: {
		rTime(date) {
			let json_date = new Date(date).toJSON()
			return new Date(new Date(json_date) + 8 * 3600 * 1000)
				.toISOString()
				.replace(/T/g, ' ')
				.replace(/\.[\d]{3}Z/, '')
		},
		// 取消预约
		cancelFeedbackList(registerDate, timeSlot) {
			cancelFeedback({ registerDate: registerDate, timeSlot: timeSlot }).then(
				({ data, head }) => {
					if (head.code != 200) {
						this.showContent = true
					} else {
						// console.log(123);
						this.typeMenuList = data
						this.content = head.msg
						// console.log(this.typeMenuList)
						this.showModal = true
					}
				},
			)
		},
		cancel() {
			this.cancelFeedbackList(this.registerDate, this.timeSlot)
			// this.showModal = true
			// console.log('123')
		},
		confirm() {
			// console.log('确认')
			this.$refs.uForm.validate(valid => {
				if (valid) {
					// 	serialNo: "20211216",
					// orgCode: "100145"
					// registerFee: "30"
					// orgId:    医院id
					// orgName:  医院名称
					// id:   挂号id
					// cancelType：   取消类型
					// cancelReason：    取消原因
					// patientIdentity： 身份证号
					this.parameterList.orgCode = this.orgCode
					this.parameterList.orgId = this.orgId
					this.parameterList.orgName = this.curHos
					this.parameterList.patientIdentity = this.patientIdentity
					this.parameterList.registerDate = this.registerDate.split(' ')[0]
					cancelRegister(this.parameterList).then(({ data, head }) => {
						console.log(data, head)
						if (head.code == 200) {
							this.$refs.uToast.show({
								title: '取消成功',
								type: 'success',
								isTab: true,
								duration: 1000,
								url: '/pages/index/index',
							})
						} else {
							this.$refs.uToast.show({
								title: head.msg,
								type: 'error',
								isTab: true,
							})
							return
						}
					})
				} else {
					this.showModal = true
					console.log('失败')
				}
				//
			})
		},
		cancelBtn() {
			console.log('取消')
			this.model.typeMenu = ''
		},
		typeMenuConfirm(e) {
			console.log(e)
			this.model.typeMenu = e[0].label
			this.model.cancelId = e[0].value
			this.parameterList.cancelType = e[0].value
			this.parameterList.cancelReason = e[0].label
		},
	},
}
</script>

<style lang="scss">
page {
	background: rgb(236, 236, 236);
}
.bigBox {
	width: 100%;
	padding: 20rpx;

	.content {
		background: #fff;
		-moz-box-shadow: 2px 2px 5px #9c9c9c;
		-webkit-box-shadow: 2px 2px 5px #9c9c9c;
		box-shadow: 2px 2px 5px #9c9c9c;
		text-align: center;
		.title {
			font-size: 18px;
			padding: 10px;
			font-weight: bold;
		}
		.detailed {
			.detailed_content {
				display: flex;
				padding: 20px;
				word-break: normal;
				display: block;
				word-wrap: break-word;
				overflow: hidden;
				.content_item {
					font-size: 32rpx;
				}
				.detailed_content_title {
					font-weight: bold;
					font-size: 30rpx;
					text-align: left;
					min-width: 180rpx;
					// margin-right: 100rpx;
				}
			}
		}
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>